<template>
  <el-space
    size="large"
    direction="vertical"
    style="width: 100%"
    alignment="flex-start"
    fill
  >
    <!-- 操作按钮 -->
    <el-space size="large" direction="horizontal" alignment="flex-start">
      <el-button
        v-if="detailData.baseInfo?.editable"
        type="primary"
        @click="handleUpdate"
      >
        修改
      </el-button>
      <el-button
        v-if="detailData.baseInfo?.canReviewMeeting"
        type="primary"
        @click="
          router.push(
            '/meetings/kickoff?association-type=TOPIC_REVIEW&association-id=' +
              detailData.baseInfo?.id
          )
        "
      >
        发起开题评审会
      </el-button>
      <el-button
        v-if="detailData.baseInfo?.canBudgetMeeting"
        type="primary"
        @click="
          router.push(
            '/meetings/kickoff?association-type=BUDGET&association-id=' +
              detailData.baseInfo?.id
          )
        "
      >
        发起经费预算费
      </el-button>
      <el-button>导出数据</el-button>
    </el-space>
    <!-- 操作按钮 -->
    <!-- 项目简介 -->
    <div v-if="detailData.baseInfo" class="project-title">
      <div class="item">
        <span class="label">开题设计报告ID：</span>
        <span>{{ detailData.baseInfo.id }}</span>
      </div>
      <div class="item">
        <span class="label">审核状态：</span>
        <span>
          {{
            dictStore.getDictLabelForValue(
              'audit_status',
              detailData.baseInfo.status
            )
          }}
        </span>
      </div>
      <div class="item">
        <span class="label">记录创建人：</span>
        <span>{{ detailData.baseInfo.creatorName }}</span>
      </div>
      <div class="item">
        <span class="label">记录创建时间：</span>
        <span>
          {{
            $XEUtils.toDateString(
              detailData.baseInfo.createTime,
              'yyyy-MM-dd HH:mm:ss'
            )
          }}
        </span>
      </div>
    </div>
    <!-- 项目简介 -->
    <!-- 课题信息 -->
    <div v-if="detailData.topicRespVO" class="box">
      <el-space
        size="large"
        direction="vertical"
        style="width: 100%"
        alignment="flex-start"
        fill
      >
        <div class="common-title">
          <img src="@/assets/project_images/icon2.png" alt="" class="icon" />
          <span>课题信息</span>
        </div>
        <vxe-table
          align="left"
          :data="[detailData.topicRespVO]"
          size="small"
          border
          min-height="0"
        >
          <vxe-column field="id" title="课题编号" />
          <vxe-column field="name" title="课程名称" />
          <vxe-column field="leader" title="课题负责人" />
          <vxe-column field="type" title="课题类型">
            <template #default="{ row }">
              {{ dictStore.getDictLabelForValue('topic_type', row.type) }}
            </template>
          </vxe-column>
          <vxe-column field="subjectAreaText" title="专业领域" />
          <vxe-column
            field="researchStartDate"
            title="研究开始时间"
            :formatter="['formatDate', 'yyyy-MM-dd HH:mm:ss']"
          />
          <vxe-column
            field="researchEndDate"
            title="研究结束时间"
            :formatter="['formatDate', 'yyyy-MM-dd HH:mm:ss']"
          />
          <vxe-column field="estimatedBudget" title="预计投入经费（万元）" />
          <vxe-column field="externalCooperationRequired" title="是否需要外协">
            <template #default="{ row }">
              {{
                dictStore.getDictLabelForValue(
                  'yes_no',
                  row.externalCooperationRequired
                )
              }}
            </template>
          </vxe-column>
          <vxe-column field="leadingUnitName" title="承担单位" />
          <vxe-column field="reportingUnitNames" title="协作单位" />
        </vxe-table>
      </el-space>
    </div>
    <!-- 课题信息 -->
    <!-- 其他信息 -->
    <div v-if="detailData.baseInfo" class="box">
      <el-space
        size="large"
        direction="vertical"
        style="width: 100%"
        alignment="flex-start"
        fill
      >
        <div class="common-title">
          <img src="@/assets/project_images/icon4.png" alt="" class="icon" />
          <span>其他信息</span>
        </div>
        <vxe-table
          align="left"
          :data="[detailData.baseInfo]"
          size="small"
          border
          min-height="0"
        >
          <vxe-column field="reportUnitNames" title="上报单位" />
          <vxe-column field="reporterNames" title="上报人" />
        </vxe-table>
      </el-space>
    </div>
  </el-space>
  <devDetail
    v-if="detailData?.baseInfo?.openingType == 1"
    :detail-data="detailData"
  />
  <extendDetail
    v-else-if="detailData?.baseInfo?.openingType == 2"
    :detail-data="detailData"
  />
</template>

<script setup>
  import { useDictStore } from '@/store/modules/dict'
  import devDetail from './devDetail/index'
  import extendDetail from './extendDetail/index'
  const route = useRoute()

  const props = defineProps({
    detailData: {
      type: Object,
      default: () => {},
    },
  })

  const dictStore = useDictStore()
  const router = useRouter()

  const handleUpdate = () => {
    router.push(
      `/project/approval/report-submit?id=${props.detailData.baseInfo.id}&getType=2`
    )
  }
</script>

<style lang="scss" scoped>
  .project-title {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 28px;
    padding: 10px;
    background: var(--vxe-table-header-background-color);

    .item {
      display: inline-flex;
      margin-right: 90px;
      font-size: $base-font-size-default;

      .label {
        color: $base-color-text-secondary;
      }
    }
  }

  .box {
    .common-title {
      display: flex;
      align-items: center;
      font-size: $base-font-size-default;
      font-weight: bold;
      color: $base-color-text-primary;

      .icon {
        margin-right: 10px;
      }
    }

    .sub-title {
      font-size: $base-font-size-small;
      font-weight: bold;
    }
  }
</style>
